<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h2,#tbody td{
            text-align: center;
        }
        #wrap1,#faqsList{
            margin:0 auto;
            width: 500px;
        }
        #faqsList tr:nth-child(even){
            background-color: aliceblue;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="../js/template-web.js"></script>
    <script type="text/html" id="faqsListTemplate">
        {{each faqsList faqs index}}
            <tr>
                <td>{{index+1}}</td>
                <td><a href="detail.html?id={{faqs.id}}">{{faqs.title}}</a></td>
                <td>{{faqs.classes.cname}}</td>
                <td>{{faqs.createDate}}</td>
            </tr>
        {{/each}}
    </script>
    <script type="text/javascript">
        $(function () {
            $.post("../faqs/getAll",function(data){
                if(data.length==0){
                    $("#wrap2").html("未检索到任何内容！")
                    return;
                }
                var faqsListhtml = template("faqsListTemplate",{faqsList:data});
                $("#tbody").html(faqsListhtml)
            },"json")
        })
        function search() {
            var key = $("input[id=key]").val();
            alert(key)
            alert(111);
            $.post("../faqs/getByKey",{key:key},function(data){
                if(data.length==0){
                    $("#wrap2").html(`<div style="margin: 20px auto;width: 300px;font-weight: bolder;">没有找到和‘${$("#key").val()}’相关的内容，请修改关键字后重试。</div>`)
                    return;
                }
                var faqsListhtml = template("faqsListTemplate",{faqsList:data});
                $("#tbody").html(faqsListhtml)
            },"json")
        }
    </script>
</head>
<body>
  <div>
      <h2>常见问题检索</h2>
      <div id="wrap1">
          <label for="key">请输入查询关键字：</label>
          <input id="key" type="text" value=""/>
          <button id="search" onclick="search()">查询</button>
          <a href="add.html">添加常见问题</a>
      </div>
  </div>
  <div id="wrap2">
    <h2>检索结果</h2>
    <table id="faqsList">
        <thead>
            <tr>
                <th>编号</th>
                <th>标题</th>
                <th>分类</th>
                <th>创建时间</th>
            </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>
  </div>
</body>
</html>